<template>
  <div class="photoinfo">
    <van-card :title="imageInfo.title">
      <div slot="num">点击{{imageInfo.click}}次</div>
      <div slot="price">{{imageInfo.add_time}}</div>
    </van-card>
    <div class="content">
      <hr />
      <img
        :src="thum.src"
        alt
        v-for="(thum,index) in thums"
        :key="thum.id"
        @click="imagePreview(index)"
      />
      <p>{{imageInfo.content}}</p>
    </div>
    <Comment :id="id"></Comment>
  </div>
</template>
<script>
import Comment from '@/components/Comment'
import { ImagePreview } from 'vant'
export default {
  data: () => ({
    id: '',
    imageInfo: [],
    thums: []
  }),
  created () {
    this.id = this.$route.params.id
    this.getImageInfo()
    this.getThumimages()
  },
  methods: {
    async getImageInfo () {
      const {
        data: { status, message }
      } = await this.$http.get('api/getimageInfo/' + this.id)
      if (status !== 0) return this.$Toast(message)
      console.log(message)
      this.imageInfo = message
    },
    async getThumimages () {
      const {
        data: { status, message }
      } = await this.$http.get('api/getthumimages/' + this.id)
      if (status !== 0) return this.$Toast(message)
      this.thums = message
      console.log(message)
    },
    imagePreview (startPosition) {
      let images = []
      this.thums.forEach(item => {
        if (item.src) images.push(item.src)
      })
      ImagePreview({
        images,
        startPosition
      })
    }
  },
  components: {
    Comment
  }
}
</script>
<style lang="less" scoped>
.photoinfo {
  padding: 0 8px;
  box-sizing: border-box;
  .van-card {
    background-color: #fff;
  }
  .van-card__thumb {
    height: 55px;
  }
  .van-card__content {
    min-height: 55px;
  }
  .van-card__title {
    margin-bottom: 20px;
    color: red;
    font-size: 16px;
    text-align: center;
  }
  .van-card__price {
    color: #1989fa;
  }
  .content {
    font-size: 12px;
    img {
      width: 100px;
      height: 100px;
      margin-left: 15px;
    }
  }
}
</style>
